<template>
    <div class="question" style="overflow:hidden;-webkit-app-region: drag">
        <div class="" >
            <div class="boxTop">
                密保问题
                <div class="imgBox">
                        <div class="close" style="-webkit-app-region: no-drag;">
                            <img src="../../assets/img/login/images/close-img.png" @click="close">
                        </div>
                        <div class="min"  style="-webkit-app-region: no-drag;">
                            <img src="../../assets/img/login/images/min-img.png" @click='onMinfun'>
                        </div>
                </div>
            </div>
            <p class="SetPassquestion">为了你的账号安全，请设置您的密保问题</p>
            <!-- 密保问题 -->
            <div class="userinput queinput" >
                密保问题
                <select class="username" v-model="queid" style="overflow:hidden;-webkit-app-region: no-drag">
                    <option value="">请输入密保问题</option>
                    <option :value="item.id" v-for="(item ,index) in options" :key="index">{{item.value}}</option>
                </select>
            </div>
            <!-- 密保答案 -->
            <div class="userinput queinput">
                密保答案
                <input type="text" placeholder="请输入密保问题答案" v-model="ansdata" class="username" @change="showans" style="overflow:hidden;-webkit-app-region: no-drag">
                <div class="error" v-show="this.showdaimg">
                    <img src="../../assets/img/login/images/error_03.png" alt="">
                    <span class="spanone">答案超出20个字，请重新输入</span>
                </div> 
            </div>
            <div class="nextstep" @click="sureAns" style="overflow:hidden;-webkit-app-region: no-drag">
                确定
            </div>
        </div>
    </div>
</template>
<script>
import https from '@/public/https'
 if (window.require) {
    var ipc = window.require('electron').ipcRenderer
  }
export default {
    name:"sign",
    data(){
        return{
            showdaimg:false,
            options:[],
            ansdata:"",
            queid:''
        }
    },
    mounted(){
        this.getquestion()
    },
    methods:{
        showans:function(){  //密保答案
            if(this.ansdata.length>20){
                this.showdaimg = !this.showdaimg;
            }else{
                this.showdaimg=false
            }
        },
        getquestion(){
            this.https("common/getObtainUserAnswerList").then(data=>{
                this.options = data;
            })
        },
        sureAns(){
            var self = this;
            if(!this.queid){
                this.$toast({
                    message:'请选择密保问题'
                })
                return
            }
            if(!this.ansdata){
                this.$toast({
                    message:'请输入答案'
                })
                return
            }

            https.post('user/postUserSetAnswer',{uid: this.$store.state.userInfo.id,question_id:this.queid,answer: this.ansdata}).then(data => {
                if(data.status == 1){
                         this.$toast({
                            message:'设置成功,返回登录',
                            onClose:function(){
                                self.$router.push('/');
                            }
                        })                               
                } else {
                    this.$toast({
                        message: data.message
                    })
                }
            })
        },
        close:function(){
            if (window.require) { 
                ipc.send('window-close');
            } 
        },

          // 最小化主窗口
        onMinfun(){
            if (window.require) { 
                ipc.send('window-min');
        }   
        },
    }
}
</script>
<style lang="less" scoped>
    @import url(../../assets/css/login/public.less);
    @import url(../../assets/css/login/sign.less);
    .question{
        width: 681px;
        height: 431px;
    }
    .SetPassquestion{
        font-size: 12px;
        color: #FF822E;
        padding-left: 100px;
        margin-top: 50px;
        margin-bottom: 25px;
    }
    select {  
        border: solid 1px #dddddd;   
        appearance:none;  
        -moz-appearance:none;  
        -webkit-appearance:none;  
        background: url("../../assets/img//plan/images/select_06.png") no-repeat scroll center transparent; 
        background-position: 250px 15px;
        padding:0 5px;  
    }  
    select::-ms-expand { display: none; }
    
</style>




